<template>
	<view>
		<view class="detail" :style="{backgroundImage:'url('+infoList.img+')'}">
			<view class="yi fbox fbox-start">
				<view class="img">
					<image :src="infoList.avatar"></image>
					<view class="sex-box">
						<image class="sex" v-if="infoList.gender == 1" src="/static/card/nan.png"></image>
						<image class="sex" v-if="infoList.gender == 2" src="/static/card/nv.png"></image>
					</view>
				</view>
				<view class="right">
					<view class="name ellipsis2">
						{{infoList.name}}
					</view>
					<view class="phone f26 fbox fbox-acenter">
						<image src="/static/card/phone.png"></image>
						<text>{{infoList.mobile}}</text>
					</view>
				</view>
			</view>
			<view class="er fbox fbox-end colorwhite">
				<view class="right f26">
					<view class="contact-item fbox fbox-start">
						<image style="width: 30rpx;height: 30rpx;" src="/static/card/people.png" mode=""></image>
						<text>MUID: {{infoList.show_id}}</text>
					</view>
					<view class="contact-item fbox fbox-start">
						<image src="/static/card/mail.png" mode="widthFix"></image>
						<text>{{infoList.email}}</text>
					</view>
					<view class="contact-item fbox fbox-start">
						<image src="/static/card/facebook.png" mode="widthFix"></image>
						<text>{{infoList.facebook}}</text>
					</view>
					<view class="contact-item fbox fbox-start">
						<image src="/static/card/camera.png" mode="widthFix"></image>
						<text>{{infoList.lnstagram}}</text>
					</view>
				</view>
			</view>
		</view>


		<view class="sa-list fbox fbox-acenter fbox-jbetween">
			<view class="sa-list-item fbox fbox-acenter fbox-jcenter">
				<image src="/static/card/eye.png" mode="widthFix"></image>
				<text class="f32 color3">{{infoList.showNum}}</text>
			</view>
			<view class="sa-list-item fbox fbox-acenter fbox-jcenter" @click="likeNum(infoList.id)">
				<image src="/static/card/heart.png" mode="widthFix" v-if="infoList.isLike == 0"></image>
				<image src="/static/card/heart_a.png" mode="widthFix" v-else></image>
				<text class="f32 color3">{{infoList.likeNum}}</text>
			</view>
			<view class="sa-list-item fbox fbox-acenter fbox-jcenter" @click="collectionNum(infoList.id)">
				<image src="/static/card/star.png" mode="widthFix" v-if="infoList.isCollection == 0"></image>
				<image src="/static/card/star_a.png" mode="widthFix" v-else></image>
				<text class="f32 color3">{{infoList.collectionNum}}</text>
			</view>
		</view>

		<view class="btn_box" v-if="ishide == false">
			<u-button class="btn"  text="Modify My e-Card" shape="circle" color="#40c9ff" @click="gotonav('/pages/user/card/edit')"></u-button>
			<u-button class="btn"  @click="Share" text="Share My e-Card" shape="circle" color="#fff" style="color: #40c9ff;"></u-button>
			<u-button class="btn"  text="My Collection Box" @click="gotonav('/pages/user/card/list')" shape="circle" color="#40c9ff"></u-button>
		</view>
		<view class="btn_box" v-else>
			<u-button class="btn"  text="Edit My e-Card" shape="circle" color="#40c9ff" @click="gotonav('/pages/user/card/edit')"></u-button>
			<u-button class="btn"  @click="Share" text="My e-Card Collection" shape="circle" color="#fff" style="color: #40c9ff;"></u-button>
		</view>
		<view class="di-sa-list fbox fbox-start fbox-jaround" v-if="ishide == true">
			<view class="di-sa-list-item fbox fbox-column fbox-acenter fbox-jcenter tc" @click="Remove(infoList.id)">
				<image src="/static/card/ecard1.png" mode="widthFix" v-if="infoList.isCollection == 1"></image>
				<image src="/static/card/icon_sc.png" mode="widthFix" style="width: 75rpx; padding-bottom: 24rpx; padding-top: 10rpx;" v-else></image>
				<text class="color3" v-if="infoList.isCollection == 1">Remove from\ne-Card Box</text>
				<text class="color3" v-else>Save to <br>e-Card Box</text>
			</view>
			<view class="di-sa-list-item fbox fbox-column fbox-acenter fbox-jcenter tc" @click="isshow = true">
				<image src="/static/card/ecard2.png" mode="widthFix"></image>
				<text class="color3">Share-card</text>
			</view>
			<view class="di-sa-list-item fbox fbox-column fbox-acenter fbox-jcenter tc" @click="gotonav('/pages/user/card/list2')">
				<image src="/static/card/ecard3.png" mode="widthFix"></image>
				<text class="color3">e-Card List </text>
			</view>
			<view class="di-sa-list-item fbox fbox-column fbox-acenter fbox-jcenter tc" @click="MyCard">
				<image src="/static/card/ecard4.png" mode="widthFix"></image>
				<text class="color3">My e-Card</text>
			</view>
		</view>
		<view class="share" v-if="show">
			<view class="poster bg-white">
				<view class="poster-bg">
					<image src="/static/tabbardetails/share_bg.png" mode="widthFix"></image>
				</view>
				<view class="share-zi f28 color3">
					sally yap11233 hdhjd dhdjj ebjeyoavs snls rfjcid ...
				</view>
				<view class="share-info fbox fbox-jbetween fbox-end">
					<view class="info fbox fbox-acenter">
						<image src="/static/logo.png" mode="widthFix"></image>
						<text class="f30">Yap Sally</text>
					</view>
					<view class="img">
						<image src="/static/tabbardetails/qr.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="share-type bg-white">
				<view class="two fbox fbox-acenter fbox-jaround">
					<view class="two-item fbox fbox-column fbox-acenter">
						<image src="/static/login/wx.png" mode="widthFix"></image>
						<text>Sharing with Wechat</text>
					</view>
					<view class="two-item fbox fbox-column fbox-acenter">
						<image src="/static/tabbardetails/fookbook.png" mode="widthFix"></image>
						<text>Sharing with Wechat</text>
					</view>
				</view>
				<view class="share-btn" @click="close">
					Cancel Sharing
				</view>
			</view>
		</view>
		<u-modal :show="isshow" :confirmText="confirmText" :cancelText="cancelText" :title="title" @confirm="confirm"
			@cancel="cancel" :showCancelButton="true" :content='content'></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				infoList: {},
				show:false,
				isshow:false,
				ishide:false,
				id:"",
				title: '是否复制',
				content: "",
				cancelText: this.$t('user.cancel'),
				confirmText: this.$t('user.yes'),
			}
		},
		onLoad(params) {
			this.id = params.id
			console.log(this.id)
			if(this.id == ''||this.id == undefined){
				this.ishide = false
				this.init()
			}else{
				this.ishide = true
				this.getcard()
			}
		},
		methods: {
			MyCard(){
				uni.navigateTo({
					url:'/pages/user/card/details/index'
				})
			},
			cancel() {
				this.isshow = false
			},
			confirm() {
				this.isshow = false
				uni.setClipboardData({
				    data: this.infoList.mobile, // e是你要保存的内容
				    success: function () {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
				    }
				})
			},
			gotonav(url){
				uni.navigateTo({
					url:url
				})
			},
			Remove(id){
				uni.showLoading({
					mask: true
				})
				const params = {
					map: 'applet_business_card_collection',
					id: id
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						uni.hideLoading()
						uni.showToast({
							title:res.data.data.msg,
							icon:"none"
						})
						if(this.ishide == false){
							this.init()
						}else{
							this.getcard()
						}
						
					} else {
						uni.hideLoading()
					}
				})
			},
			getcard(){
				const params = {
					map: 'applet_business_card_detail',
					id: this.id
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						this.infoList = res.data.data
						console.log(res.data.data)
						this.content = 'Call:'+ this.infoList.mobile
					} else {
					}
				})
			},
			close() {
				this.show = false
			},
			Share(){
				this.show = true
			},
			collectionNum(id){
				uni.showLoading({
					mask: true
				})
				const params = {
					map: 'applet_business_card_collection',
					id: id
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						uni.hideLoading()
						uni.showToast({
							title:res.data.data.msg,
							icon:"none"
						})
						if(this.ishide == false){
							this.init()
						}else{
							this.getcard()
						}
						
					} else {
						uni.hideLoading()
					}
				})
			},
			likeNum(id) {
				console.log(id)
				uni.showLoading({
					mask: true
				})
				const params = {
					map: 'applet_business_card_like',
					id: id
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						uni.hideLoading()
						uni.showToast({
							title:res.data.data.msg,
							icon:"none"
						})
						if(this.ishide == false){
							this.init()
						}else{
							this.getcard()
						}
					} else {
						uni.hideLoading()
					}
				})
			},
			init() {
				const params = {
					map: 'applet_business_card_detail'
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						this.infoList = res.data.data
						console.log(res.data.data)
					} else {

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.share {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		background-color: rgba(0, 0, 0, .4);
	
		.poster {
			position: fixed;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			padding: 30rpx;
			// box-sizing: border-box;
			width: 80%;
			border-radius: 30rpx;
	
			.poster-bg {
				margin: 0rpx auto;
	
				image {
					width: 100%;
				}
			}
	
			.share-zi {
				margin-top: 10rpx;
			}
	
			.share-info {
				.info {
					image {
						width: 50rpx;
						margin-right: 10rpx;
					}
	
					text {
						color: #606477;
					}
				}
	
				.img {
					image {
						width: 100rpx;
					}
				}
			}
		}
	
		.share-type {
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 40rpx 0;
			border-radius: 40rpx 40rpx 0 0;
	
			.two {
				.two-item {
					image {
						width: 110rpx;
					}
	
					text {
						margin-top: 10prx;
						font-size: 26rpx;
						color: #6f6f6f;
					}
				}
			}
	
			.share-btn {
				border: 1px solid #e0f0ff;
				color: #2497ff;
				width: 90%;
				margin: 40rpx auto 0rpx;
				padding: 30rpx 0;
				text-align: center;
				border-radius: 50rpx;
			}
		}
	}
	page {
		background-color: #FFFFFF;
	}

	.btn_box {
		margin-top: 100rpx;

		.btn {
			margin-top: 30rpx;
			width: 70%;
			box-shadow: 0rpx 0rpx 10rpx 2rpx #bcbcbc;
		}
	}

	.top {
		margin: 30rpx;
		border-radius: 20rpx;

		image {
			border-radius: 20rpx;
			width: 100%;
			height: 160rpx;
		}
	}

	.detail {
		// background-color: #3cc9fe;
		margin: 30rpx;
		padding: 30rpx;
		border-radius: 30rpx;
		position: relative;
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.yi {
			image {
				width: 120rpx;
				height: 120rpx;
				border: 4rpx solid #FFFFFF;
				border-radius: 50%;
			}

			.img {
				width: 130rpx;
				position: relative;
				margin-right: 30rpx;

				.sex-box {
					border-radius: 50%;
					background-color: #FFFFFF;
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					bottom: 20rpx;
					right: 0rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.sex {
						width: 20rpx;
						height: 22rpx;
					}
				}

			}

			.right {
				.name {
					width: 450rpx;
					color: #fff;
					font-weight: 600;
				}

				.phone {
					background-color: #FFFFFF;
					padding: 4rpx 10rpx;
					border-radius: 30rpx;
					max-width: 51%;
					margin-top: 10rpx;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 5rpx;
					}

				}
			}
		}

		.er {
			margin-top: 30rpx;
			margin-left: 20rpx;

			.img {
				width: 30%;
				width: 65px;
				position: relative;
				margin: 0 30rpx 0 20rpx;
			}


			.right {
				width: 90%;

				.contact-item {
					margin-bottom: 10rpx;

					image {
						width: 30rpx;
						margin-right: 10rpx;
					}

					text {
						width: 90%;
					}
				}
			}
		}
	}

	.sa-list {
		margin: 50rpx 30rpx 30rpx;

		.sa-list-item {
			width: 32%;
			border-radius: 50rpx;
			padding: 16rpx 0;
			border: 1px solid #e2e2e2;

			image {
				width: 36rpx;
				margin-right: 10rpx;
			}

			text {}
		}
	}

	.di-sa-list {
		position: fixed;
		bottom: 50rpx;
		width: 100%;

		.di-sa-list-item {
			image {
				width: 100rpx;
			}

			text {
				font-size: 22rpx;
			}
		}
	}
</style>
